<template>
	<view class="page-bg">
		<view class="main-container">
			<view class="tl-font-48-000 mt-136">个人信息</view>
			<view class="tl-font-28-666 mb-86">检测到您为首次登录，
				请编辑您的个人信息</view>
			<view class="tl-m-two">
				<input class="uni-input tl-input" v-model="name" type="text" maxlength="10" placeholder="请输入姓名" />
			</view>
			<view class="tl-m-two">
				<input class="uni-input tl-input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
			</view>
			<view class="tl-m-two">
				<input class="uni-input tl-input" v-model="barcode" type="password" maxlength="22"
					placeholder="请设置登录密码" />
			</view>
			<view class="tl-m-two h-110">
				<picker mode="selector" :range="array" @change="bindSexChange" ref="picker">
					<view class="uni-input tl-input" v-model="genderName" type="text" placeholder="请选择性别"
						readonly="readonly">
						<view style="font-size: 32rpx;color: grey;">{{sex||'请选择性别'}}</view>
					</view>
			<!-- 		<u-action-sheet :tips="tips" :list="listGender" v-model="showGender" @click="actionSheetCallback">
					</u-action-sheet> -->
				</picker>	
			</view>

			<view class="tl-m-two h-110 mt-32">
				<picker mode="date" start="1900-01-01" :end="endDate" fields="day" :pickerValueDefaul="defaulTime"
					value="1980-01-01" @change="bindDateChange" ref="picker">
					<view class="selectorSex">
						<view class="uni-input tl-input" v-model="genderName" type="text" placeholder="请选择生日"
							readonly="readonly">
							<view style="font-size: 32rpx;color: grey;">{{birthday ||'请选择生日'}}</view>
						</view>
					</view>
				</picker>
			</view>
			<!-- <view class="tl-btn-570" @tap="goregirect()">
			        下一步
			      </view> -->
			<div class="submit-wrapper">
						<button type="primary" class="login-btn" @tap="regirect()">下一步</button>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				border: false,
				options: {},
				name: '',
				mobile: '',
				barcode: '',
				sex:'',
				genderName: '',
				gender: '',
				showGender: false,
				birthday: '',
				endDate: '2122',
				defaultTime: [2, 1, 2],
				// leftIcon: 'https://file.genepre.com/wechat/gengduo2x.png',
				tips: {
					text: '请选择性别',
					color: '#909399',
					fontSize: 24
				},
				// listGender: [{
				// 		text: '男',
				// 		value: '1',
				// 	},
				// 	{
				// 		text: '女',
				// 		value: '2',
				// 	}
				// ],
				array:['男','女'],
			}
		},
		// onLoad(options) {
		// 	// uni.$func.toast("验证码错误");
		// 	// this.options=options;
		// 	// uni.$u.get("/xxx").then((res)=>{});
		// 	// uni.$u.vuex('userInfo',{nickname:"张三"});
		// 	// uni.$api.user.login({code:'xxxx'})
		// 	// this.getData();
		// },

		methods: {

			bindDateChange(e) {
				this.birthday = e.detail.value;
				console.log('this.birthday', this.birthday)
			},

			inputConfirm() {
				uni.hideKeyboard();
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				document.activeElement.blur();
			},
			toShow() {
				this.showGender = true;
			},
			// 选择性别操作
			bindSexChange(e) {
				this.sex =this.array[e.detail.value]
				console.log('this.sex', this.sex)
			},
			// actionSheetCallback(index) {
			//   uni.hideKeyboard();
			//   this.genderName = this.listGender[index].text;
			//   this.gender = this.listGender[index].value;
			//   console.log('this.sex',this.sex)
			// },

			// 验证手机号码
			isPhone() {
				let mPattern = /^1[3456789][\d]{9}$/;
				return mPattern.test(this.mobile)
			},

			// 更新用户信息
			updateUserInfo() {
				let params = {
					name: this.name,
					mobile: this.mobile,
					barcode: this.barcode,
					gender: this.gender,
				};

				if (!params.name) {
					uni.$func.toast("请输入姓名");
					return
				}
				if (!params.mobile) {
					uni.$func.toast("请输入手机号码");
					return
				}
				if (!this.isPhone()) {
					uni.$func.toast("请输入正确的手机号码");
					return
				}
				if (params.mobile.length != 11) {
					uni.$func.toast("手机号码格式不正确");
					return
				}
				if (!params.barcode) {
					uni.$func.toast("请输入采集器编号");
					return
				}
				if (!params.gender) {
					uni.$func.toast("请选择性别");
					return
				}

				uni.$u.post("/mdd/updateUserInfo", params)
					.then((res) => {
						//alert(JSON.stringify(res))
						if (res.code == 1) {
							uni.navigateTo({
								url: '/pages/details/details'
							});
						} else {
							uni.$func.toast(res.msg);
						}
					})
			},
			regirect(){
			    uni.switchTab({
			        //关闭当前页面，跳转到应用内的某个页面。
			        url:'/pages/tuiJian/tuiJian'
			    });
			},
			getData() {
				uni.$func.toast("验证码错误");
				uni.$u.get("/api/home/banner").then((res) => {
					if (res.code == 200) {
						this.banner = res.data
					}
				});

				uni.$u.post("/api/login", {
						username: "admin",
						password: "xxx"
					}, {
						'Content-Type': 'application/json'
					})
					.then((res) => {

					})

				uni.$u.post("/api/login", {
						username: "admin",
						password: "xxx"
					}, {
						'Content-Type': 'application/json'
					})
					.then((res) => {

					})
			},

	// 		// 图片点击后跳转操作
	// 		imgClick() {
	// 			console.log('图片点击后跳转操作')
	// 		}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url("../../static/background.png");
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}

	// .page-bg {
	//   width: 100vw;
	//   height: 100vh;
	//   overflow: hidden;
	//   background-size: 750rpx auto;
	//   background-color: #F9F9F9;
	// }

	.main-container {
		width: 570rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}

	.tl-font-48-000 {
		font-size: 58rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}

	.tl-font-28-666 {
		font-size: 38rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}

	.tl-btn-570 {
		width: 570rpx;
		height: 94rpx;
		line-height: 94rpx;
		text-align: center;
		background: #4682FF;
		border-radius: 47rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		margin-top: 64rpx;
	}

	.mt-136 {
		margin-top: 136rpx;
		margin-bottom: 28rpx;
	}

	.mb-86 {
		margin-bottom: 86rpx;
	}

	.tl-input {
		background: #F4F4F4;
		margin-bottom: 32rpx;
		border-radius: 55rpx;
		box-sizing: border-box;
		height: 110rpx;
		line-height: 110rpx;
		background: #F4F4F4;
		border-radius: 55rpx;
		padding: 0 50rpx;
	}

	/*覆盖input输入框的样式*/
	.u-input {
		background: #F4F4F4;
		margin-bottom: 32rpx;
		border-radius: 55rpx;
	}

	.u-input__input {
		box-sizing: border-box;
		height: 110rpx;
		line-height: 110rpx;
		background: #F4F4F4;
		border-radius: 55rpx;
		padding: 0 50rpx;
	}

	.h-110 {
		height: 110rpx;
		overflow: hidden;
	}

	.mt-32 {
		margin-top: 32rpx;
	}
	.submit-wrapper {
		padding: 10px;
		padding-top: 30px;
	}
</style>
